<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
                template="./layout/mainTemplate.xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.org/ui"  
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns="http://www.w3.org/1999/xhtml">
    <ui:define name="top">
            <h:outputLabel value="Ruta" class="tituloPrincipal"/>      
    </ui:define>

    <ui:define name="left">
    </ui:define>
    <ui:define name="content">
        <h:form id="contenido">
            
            <p:dialog header="DIRECCION" widgetVar="dlgDireccion" resizable="true" modal="true" dynamic="true" >
                    <p:panelGrid columns="1">
                        <p:dataTable id="direccionestable" var="direccion1" value="#{rutaAction.direccionPreload}" paginator="true" rows="10" >
                                    <!-- selection="{rutaAction.direccionAuxiliar}" selectionMode="multiple"-->

                           <f:facet name="header">  
                               LISTADO DE DIRECCIONES
                           </f:facet>  

                           <p:column headerText="ID">  
                               #{direccion1.idDireccion}  
                           </p:column>  

                           <p:column headerText="PRINCIPAL">  
                               #{direccion1.callePrincipal}  
                           </p:column>  

                           <p:column headerText="SECUNDARIA">  
                               #{direccion1.calleSecundaria}  
                           </p:column>  

                           <p:column headerText="NUMERO" >  
                               #{direccion1.numeracion}  
                           </p:column>  

                           <p:column headerText="NOMBRE">  
                               #{direccion1.persona.nombres}  
                           </p:column>  

                           <p:column headerText="APELLIDO">  
                               #{direccion1.persona.apellidos}  
                           </p:column>  
                                    
                           <p:column headerText="">  
                               <p:commandLink action="#{rutaAction.seleccionarDireccion(direccion1)}" id="lnkAgregar" value="Agregar" ajax="false"/> 
                           </p:column>  

                           <f:facet name="footer">  
                               DIRECCIONES DISPONIBLES
                           </f:facet>  
                       </p:dataTable>
                    </p:panelGrid>
            </p:dialog> 
            
            <p:panelGrid columns="1">
            
                <p:messages id="messages" showDetail="true" autoUpdate="true" closable="true" > 
                <p:effect type="fade" event="load" delay="2000" />
            </p:messages>
                
            <p:panel header="Fecha">
                <h:outputLabel value="Ingresar fecha asignada a ruta: "/>
                <p:calendar value="#{rutaAction.fecha}" id="cal" showButtonPanel="true"/>
            </p:panel>
            
            <p:panel header="Empleado">
                <p:panelGrid columns="1">
                    <p:panelGrid columns="3">
                        <h:outputLabel value="CedulaRuc:"/>
                        <p:inputText value="#{rutaAction.cedulaEmpleado}" id="txtCedula" style="width: 100px"/>
                        <p:commandButton value="Buscar" actionListener="#{rutaAction.buscarEmpleado()}" id="btnBuscarCedula" ajax="false"/>
                    </p:panelGrid>     
                    
                    <p:panelGrid columns="4">
                        <h:outputLabel value="Nombre:"/>
                        <h:outputLabel value="#{rutaAction.empleado.nombres}" id="lblnombre" style="width: 100px"/>
                        <h:outputLabel value="Apellido:"/>
                        <h:outputLabel value="#{rutaAction.empleado.apellidos}" id="lblapellido" style="width: 100px"/>
                        
                        <h:outputLabel value="Telefono:"/>
                        <h:outputLabel value="#{rutaAction.empleado.telefono}" id="lbltelefono" style="width: 100px"/>
                        <h:outputLabel value="Email:"/>
                        <h:outputLabel value="#{rutaAction.empleado.email}" id="lblemail" style="width: 100px"/>
                    </p:panelGrid>  
                    
                    <h:outputLabel value="#{rutaAction.mensajeBusquedaEmpleado}" style="color: red"/>
                </p:panelGrid>
            </p:panel>

            <p:panel header="Direcciones">
                <p:panelGrid columns="1">
  
                     <p:dataTable id="direccionestable1" var="direccion" value="#{rutaAction.direcciones}" paginator="true" rows="10">                           
                        <f:facet name="header">  
                            LISTADO DE DIRECCIONES
                        </f:facet>  

                        <p:column headerText="ID">  
                            #{direccion.idDireccion}  
                        </p:column>  

                        <p:column headerText="PRINCIPAL">  
                            #{direccion.callePrincipal}  
                        </p:column>  
                        
                        <p:column headerText="SECUNDARIA">  
                            #{direccion.calleSecundaria}  
                        </p:column>  

                        <p:column headerText="NUMERO" >  
                            #{direccion.numeracion}  
                        </p:column>  

                        <p:column headerText="NOMBRE">  
                            #{direccion.persona.nombres}  
                        </p:column>  
                        
                        <p:column headerText="APELLIDO">  
                            #{direccion.persona.apellidos}  
                        </p:column>  
                         
                        <p:column style="width:8%">  
                            <p:commandLink id="selectButton" title="Eliminar" value="Eliminar" action="#{rutaAction.eliminarDireccion(direccion)}" ajax="false"/> 
                        </p:column> 
                         
                         <f:facet name="footer">
                             <p:commandButton id="modalDialogButton" value="Agregar" onclick="dlgDireccion.show()" style="float: right"/>
                         </f:facet> 
                    </p:dataTable>
                    
                </p:panelGrid>
                    
            </p:panel>
            
            <p:panel header="Mapa">
                <h:form>
                    <p:gmap center="-2.89748, -79.00436" zoom="15" type="HYBRID" id="gmapa"
                            style="width:600px;height:400px" model="#{rutaAction.mapModel}"/>
                </h:form>
                <script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>
            </p:panel>
                
            <p:panel header="Accion">
                <p:panelGrid columns="2" >
                    <h:outputLabel value="                                     "/>
                <p:panelGrid columns="3" style="float: right">
                    <p:commandButton value="Guardar" action="#{rutaAction.grabarRuta()}" id="btnGrabarRuta" ajax="false"/>
                    <p:commandButton value="Regresar" action="#{rutaAction.regresarRuta()}" ajax="false"/>
                    <p:commandButton value="Cerrar Sesion" action="#{loginAction.logout()}" ajax="false"/>
                </p:panelGrid>
                </p:panelGrid>
                    
            </p:panel>
            </p:panelGrid>
        </h:form>
    </ui:define>
</ui:composition>
